<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代毛玻璃登录页面</title>
    <style>
        :root {
            --primary-color: #4361ee;
            --text-color: #2b2d42;
            --bg-color: #f8f9fa;
            --card-bg: rgba(255, 255, 255, 0.2);
            --input-bg: rgba(255, 255, 255, 0.8);
            --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            --border-radius: 12px;
            --transition: all 0.3s ease;
        }

        .dark-mode {
            --primary-color: #3a86ff;
            --text-color: #f8f9fa;
            --bg-color: #121212;
            --card-bg: rgba(30, 30, 30, 0.3);
            --input-bg: rgba(30, 30, 30, 0.6);
            --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            min-height: 100vh;
            background: var(--bg-color);
            color: var(--text-color);
            transition: var(--transition);
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url('https://source.unsplash.com/random/1920x1080/?nature,water');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            position: relative;
            overflow: hidden;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(10px);
            z-index: -1;
        }

        .container {
            width: 100%;
            max-width: 400px;
            padding: 2rem;
        }

        .auth-card {
            background: var(--card-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 2rem;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .auth-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .auth-header h1 {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }

        .auth-header p {
            color: rgba(var(--text-color), 0.7);
        }

        .auth-tabs {
            display: flex;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid rgba(var(--text-color), 0.1);
        }

        .auth-tab {
            flex: 1;
            text-align: center;
            padding: 0.75rem;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
        }

        .auth-tab.active {
            color: var(--primary-color);
            font-weight: 600;
        }

        .auth-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--primary-color);
        }

        .auth-form {
            display: none;
        }

        .auth-form.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .form-group {
            margin-bottom: 1.25rem;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            border: 1px solid rgba(var(--text-color), 0.1);
            background: var(--input-bg);
            color: var(--text-color);
            transition: var(--transition);
            font-size: 1rem;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.2);
        }

        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
        }

        .remember-me {
            display: flex;
            align-items: center;
        }

        .remember-me input {
            margin-right: 0.5rem;
        }

        .forgot-password {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }

        .forgot-password:hover {
            text-decoration: underline;
        }

        .btn {
            width: 100%;
            padding: 0.75rem;
            border-radius: 8px;
            border: none;
            background: var(--primary-color);
            color: white;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            margin-bottom: 1.5rem;
        }

        .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .social-login {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .social-login p {
            position: relative;
            color: rgba(var(--text-color), 0.7);
            margin-bottom: 1rem;
        }

        .social-login p::before,
        .social-login p::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 30%;
            height: 1px;
            background: rgba(var(--text-color), 0.1);
        }

        .social-login p::before {
            left: 0;
        }

        .social-login p::after {
            right: 0;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--input-bg);
            color: var(--text-color);
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid rgba(var(--text-color), 0.1);
        }

        .social-icon:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .social-icon i {
            font-size: 1.2rem;
        }

        .top-controls {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
            z-index: 100;
        }

        .top-control {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: var(--shadow);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
            position: relative;
        }

        .top-control:hover {
            transform: scale(1.1);
        }

        .top-control i {
            font-size: 1.2rem;
        }

        .language-menu {
            position: absolute;
            top: 50px;
            right: 0;
            background: var(--card-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 0.5rem 0;
            min-width: 120px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: var(--transition);
            z-index: 101;
        }

        .language-menu.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .language-option {
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .language-option:hover {
            background: rgba(var(--primary-color), 0.1);
        }

        .language-flag {
            width: 20px;
            height: 15px;
            object-fit: cover;
            border-radius: 2px;
        }

        .tooltip {
            position: absolute;
            top: 50px;
            right: 0;
            background: var(--card-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 0.75rem 1rem;
            min-width: 150px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: var(--transition);
            z-index: 101;
            font-size: 0.9rem;
            text-align: center;
        }

        .tooltip.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--card-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 0.75rem 1.5rem;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 102;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .notification.active {
            opacity: 1;
            visibility: visible;
            animation: slideDown 0.5s ease, fadeOut 0.5s ease 2.5s forwards;
        }

        @keyframes slideDown {
            from { top: -50px; opacity: 0; }
            to { top: 20px; opacity: 1; }
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; visibility: hidden; }
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .container {
                padding: 1rem;
            }

            .auth-card {
                padding: 1.5rem;
            }

            .top-controls {
                top: 10px;
                right: 10px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="top-controls">
    <div class="top-control" id="toggleHelp" data-tooltip="帮助中心">
        <i class="fas fa-question-circle"></i>
        <div class="tooltip">帮助中心</div>
    </div>
    <div class="top-control" id="toggleNotification" data-tooltip="通知">
        <i class="fas fa-bell"></i>
        <div class="tooltip">通知</div>
    </div>
    <div class="top-control" id="toggleLanguage" data-tooltip="语言切换">
        <i class="fas fa-globe"></i>
        <div class="tooltip">语言切换</div>
        <div class="language-menu" id="languageMenu">
            <div class="language-option" data-lang="zh">
                <img src="https://flagcdn.com/w20/cn.png" class="language-flag" alt="中文">
                <span>中文</span>
            </div>
            <div class="language-option" data-lang="en">
                <img src="https://flagcdn.com/w20/us.png" class="language-flag" alt="English">
                <span>English</span>
            </div>
            <div class="language-option" data-lang="ja">
                <img src="https://flagcdn.com/w20/jp.png" class="language-flag" alt="日本語">
                <span>日本語</span>
            </div>
            <div class="language-option" data-lang="ko">
                <img src="https://flagcdn.com/w20/kr.png" class="language-flag" alt="한국어">
                <span>한국어</span>
            </div>
        </div>
    </div>
    <div class="top-control" id="toggleMode" data-tooltip="暗黑模式">
        <i class="fas fa-moon"></i>
        <div class="tooltip">暗黑模式</div>
    </div>
</div>

<div class="notification" id="notification">
    <i class="fas fa-check-circle"></i>
    <span>操作成功!</span>
</div>

<div class="container">
    <div class="auth-card">
        <div class="auth-header">
            <h1 data-i18n="welcome">欢迎回来</h1>
            <p data-i18n="welcome_sub">请登录您的账户继续</p>
        </div>

        <div class="auth-tabs">
            <div class="auth-tab active" data-tab="login" data-i18n="login">登录</div>
            <div class="auth-tab" data-tab="register" data-i18n="register">注册</div>
        </div>

        <form class="auth-form active" id="loginForm">
            <div class="form-group">
                <label for="loginEmail" data-i18n="email">电子邮箱</label>
                <input type="email" id="loginEmail" class="form-control" data-i18n-placeholder="email_placeholder" placeholder="请输入您的邮箱" required>
            </div>
            <div class="form-group">
                <label for="loginPassword" data-i18n="password">密码</label>
                <input type="password" id="loginPassword" class="form-control" data-i18n-placeholder="password_placeholder" placeholder="请输入您的密码" required>
            </div>
            <div class="form-options">
                <div class="remember-me">
                    <input type="checkbox" id="rememberMe">
                    <label for="rememberMe" data-i18n="remember_me">记住我</label>
                </div>
                <a href="#" class="forgot-password" data-i18n="forgot_password">忘记密码?</a>
            </div>
            <button type="submit" class="btn" data-i18n="login">登录</button>

            <div class="social-login">
                <p data-i18n="social_login">或使用以下方式登录</p>
                <div class="social-icons">
                    <div class="social-icon">
                        <i class="fab fa-google"></i>
                    </div>
                    <div class="social-icon">
                        <i class="fab fa-facebook-f"></i>
                    </div>
                    <div class="social-icon">
                        <i class="fab fa-twitter"></i>
                    </div>
                    <div class="social-icon">
                        <i class="fab fa-apple"></i>
                    </div>
                </div>
            </div>
        </form>

        <form class="auth-form" id="registerForm">
            <div class="form-group">
                <label for="registerName" data-i18n="username">用户名</label>
                <input type="text" id="registerName" class="form-control" data-i18n-placeholder="username_placeholder" placeholder="请输入您的用户名" required>
            </div>
            <div class="form-group">
                <label for="registerEmail" data-i18n="email">电子邮箱</label>
                <input type="email" id="registerEmail" class="form-control" data-i18n-placeholder="email_placeholder" placeholder="请输入您的邮箱" required>
            </div>
            <div class="form-group">
                <label for="registerPassword" data-i18n="password">密码</label>
                <input type="password" id="registerPassword" class="form-control" data-i18n-placeholder="password_placeholder" placeholder="请输入您的密码" required>
            </div>
            <div class="form-group">
                <label for="registerConfirmPassword" data-i18n="confirm_password">确认密码</label>
                <input type="password" id="registerConfirmPassword" class="form-control" data-i18n-placeholder="confirm_password_placeholder" placeholder="请再次输入密码" required>
            </div>
            <button type="submit" class="btn" data-i18n="register">注册</button>
        </form>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script>
    // 国际化语言数据
    const i18nData = {
        zh: {
            welcome: "欢迎回来",
            welcome_sub: "请登录您的账户继续",
            login: "登录",
            register: "注册",
            email: "电子邮箱",
            email_placeholder: "请输入您的邮箱",
            password: "密码",
            password_placeholder: "请输入您的密码",
            remember_me: "记住我",
            forgot_password: "忘记密码?",
            social_login: "或使用以下方式登录",
            username: "用户名",
            username_placeholder: "请输入您的用户名",
            confirm_password: "确认密码",
            confirm_password_placeholder: "请再次输入密码",
            help_center: "帮助中心",
            notifications: "通知",
            language_switch: "语言切换",
            dark_mode: "暗黑模式"
        },
        en: {
            welcome: "Welcome Back",
            welcome_sub: "Please sign in to continue",
            login: "Login",
            register: "Register",
            email: "Email",
            email_placeholder: "Enter your email",
            password: "Password",
            password_placeholder: "Enter your password",
            remember_me: "Remember me",
            forgot_password: "Forgot password?",
            social_login: "Or sign in with",
            username: "Username",
            username_placeholder: "Enter your username",
            confirm_password: "Confirm Password",
            confirm_password_placeholder: "Enter your password again",
            help_center: "Help Center",
            notifications: "Notifications",
            language_switch: "Language",
            dark_mode: "Dark Mode"
        },
        ja: {
            welcome: "おかえりなさい",
            welcome_sub: "続けるにはログインしてください",
            login: "ログイン",
            register: "登録",
            email: "メールアドレス",
            email_placeholder: "メールアドレスを入力してください",
            password: "パスワード",
            password_placeholder: "パスワードを入力してください",
            remember_me: "ログイン状態を保持",
            forgot_password: "パスワードをお忘れですか?",
            social_login: "または以下でログイン",
            username: "ユーザー名",
            username_placeholder: "ユーザー名を入力してください",
            confirm_password: "パスワード確認",
            confirm_password_placeholder: "もう一度パスワードを入力してください",
            help_center: "ヘルプセンター",
            notifications: "通知",
            language_switch: "言語切替",
            dark_mode: "ダークモード"
        },
        ko: {
            welcome: "다시 오신 것을 환영합니다",
            welcome_sub: "계속하려면 로그인하세요",
            login: "로그인",
            register: "등록",
            email: "이메일",
            email_placeholder: "이메일을 입력하세요",
            password: "비밀번호",
            password_placeholder: "비밀번호를 입력하세요",
            remember_me: "로그인 상태 유지",
            forgot_password: "비밀번호를 잊으셨나요?",
            social_login: "또는 다음으로 로그인",
            username: "사용자 이름",
            username_placeholder: "사용자 이름을 입력하세요",
            confirm_password: "비밀번호 확인",
            confirm_password_placeholder: "비밀번호를 다시 입력하세요",
            help_center: "도움말 센터",
            notifications: "알림",
            language_switch: "언어 전환",
            dark_mode: "다크 모드"
        }
    };

    // 当前语言
    let currentLang = 'zh';

    // 切换登录/注册表单
    const tabs = document.querySelectorAll('.auth-tab');
    const forms = document.querySelectorAll('.auth-form');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const tabId = tab.getAttribute('data-tab');

            // 更新标签状态
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');

            // 更新表单状态
            forms.forEach(form => {
                form.classList.remove('active');
                if (form.id === `${tabId}Form`) {
                    form.classList.add('active');

                    // GSAP动画
                    gsap.from(form, {
                        duration: 0.5,
                        opacity: 0,
                        y: 20,
                        ease: "power2.out"
                    });
                }
            });
        });
    });

    // 暗黑模式切换
    const toggleMode = document.getElementById('toggleMode');
    const modeIcon = toggleMode.querySelector('i');

    toggleMode.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');

        if (document.body.classList.contains('dark-mode')) {
            modeIcon.classList.remove('fa-moon');
            modeIcon.classList.add('fa-sun');

            // GSAP动画
            gsap.to(toggleMode, {
                duration: 0.3,
                rotation: 360,
                ease: "power2.out"
            });
        } else {
            modeIcon.classList.remove('fa-sun');
            modeIcon.classList.add('fa-moon');

            // GSAP动画
            gsap.to(toggleMode, {
                duration: 0.3,
                rotation: -360,
                ease: "power2.out"
            });
        }

        // 显示通知
        showNotification(currentLang === 'zh' ? '已切换暗黑模式' : 'Dark mode toggled');
    });

    // 语言切换
    const toggleLanguage = document.getElementById('toggleLanguage');
    const languageMenu = document.getElementById('languageMenu');

    // 显示/隐藏语言菜单
    toggleLanguage.addEventListener('click', (e) => {
        e.stopPropagation();
        document.querySelectorAll('.tooltip').forEach(t => t.classList.remove('active'));
        languageMenu.classList.toggle('active');

        // GSAP动画
        if (languageMenu.classList.contains('active')) {
            gsap.from(languageMenu, {
                duration: 0.3,
                opacity: 0,
                y: -10,
                ease: "power2.out"
            });
        }
    });

    // 点击其他地方关闭语言菜单和工具提示
    document.addEventListener('click', (e) => {
        // 只有当点击的不是语言菜单或其子元素时才关闭
        if (!languageMenu.contains(e.target) {
            languageMenu.classList.remove('active');
        }
        document.querySelectorAll('.tooltip').forEach(t => t.classList.remove('active'));
    });

    // 语言选项点击事件
    document.querySelectorAll('.language-option').forEach(option => {
        option.addEventListener('click', (e) => {
            e.stopPropagation();
            const lang = option.getAttribute('data-lang');
            changeLanguage(lang);
            languageMenu.classList.remove('active');
        });
    });

    // 切换语言函数
    function changeLanguage(lang) {
        currentLang = lang;

        // 更新所有带有data-i18n属性的元素
        document.querySelectorAll('[data-i18n]').forEach(el => {
            const key = el.getAttribute('data-i18n');
            if (i18nData[lang] && i18nData[lang][key]) {
                el.textContent = i18nData[lang][key];
            }
        });

        // 更新所有带有data-i18n-placeholder属性的输入框
        document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
            const key = el.getAttribute('data-i18n-placeholder');
            if (i18nData[lang] && i18nData[lang][key]) {
                el.placeholder = i18nData[lang][key];
            }
        });

        // 更新工具提示
        document.querySelectorAll('.top-control').forEach(control => {
            const tooltip = control.querySelector('.tooltip');
            if (tooltip) {
                const key = control.getAttribute('data-tooltip').toLowerCase().replace(' ', '_');
                if (i18nData[lang] && i18nData[lang][key]) {
                    tooltip.textContent = i18nData[lang][key];
                }
            }
        });

        // GSAP动画反馈
        gsap.from('.auth-card', {
            duration: 0.5,
            opacity: 0,
            y: 10,
            ease: "power2.out"
        });

        // 显示通知
        showNotification(lang === 'zh' ? '语言已切换' : 'Language changed');
    }

    // 显示工具提示
    document.querySelectorAll('.top-control').forEach(control => {
        control.addEventListener('mouseenter', () => {
            if (!languageMenu.classList.contains('active')) {
                const tooltip = control.querySelector('.tooltip');
                if (tooltip) {
                    tooltip.classList.add('active');
                    gsap.from(tooltip, {
                        duration: 0.2,
                        opacity: 0,
                        y: -5,
                        ease: "power2.out"
                    });
                }
            }
        });

        control.addEventListener('mouseleave', () => {
            const tooltip = control.querySelector('.tooltip');
            if (tooltip) {
                tooltip.classList.remove('active');
            }
        });
    });

    // 帮助中心按钮
    document.getElementById('toggleHelp').addEventListener('click', () => {
        showNotification(currentLang === 'zh' ? '正在打开帮助中心...' : 'Opening help center...');
    });

    // 通知按钮
    document.getElementById('toggleNotification').addEventListener('click', () => {
        showNotification(currentLang === 'zh' ? '您没有新通知' : 'You have no new notifications');
    });

    // 显示通知函数
    function showNotification(message) {
        const notification = document.getElementById('notification');
        notification.querySelector('span').textContent = message;
        notification.classList.add('active');

        // 重置动画
        setTimeout(() => {
            notification.classList.remove('active');
        }, 3000);
    }

    // 表单提交处理
    document.getElementById('loginForm').addEventListener('submit', (e) => {
        e.preventDefault();
        // 这里可以添加登录逻辑
        showNotification(currentLang === 'zh' ? '登录成功!' : 'Login successful!');

        // GSAP动画反馈
        gsap.to('.btn', {
            duration: 0.3,
            scale: 0.95,
            yoyo: true,
            repeat: 1,
            ease: "power2.inOut"
        });
    });

    document.getElementById('registerForm').addEventListener('submit', (e) => {
        e.preventDefault();
        // 这里可以添加注册逻辑
        showNotification(currentLang === 'zh' ? '注册成功!' : 'Registration successful!');

        // GSAP动画反馈
        gsap.to('.btn', {
            duration: 0.3,
            scale: 0.95,
            yoyo: true,
            repeat: 1,
            ease: "power2.inOut"
        });
    });

    // 页面加载动画
    gsap.from('.auth-card', {
        duration: 1,
        opacity: 0,
        y: 50,
        ease: "power2.out"
    });

    gsap.from('.auth-header h1', {
        duration: 0.8,
        opacity: 0,
        y: -20,
        delay: 0.2,
        ease: "power2.out"
    });

    gsap.from('.auth-header p', {
        duration: 0.8,
        opacity: 0,
        y: -20,
        delay: 0.3,
        ease: "power2.out"
    });

    gsap.from('.auth-tab', {
        duration: 0.5,
        opacity: 0,
        x: -20,
        stagger: 0.1,
        delay: 0.4,
        ease: "power2.out"
    });

    gsap.from('.form-group', {
        duration: 0.6,
        opacity: 0,
        y: 20,
        stagger: 0.1,
        delay: 0.6,
        ease: "power2.out"
    });

    gsap.from('.social-icons div', {
        duration: 0.5,
        opacity: 0,
        scale: 0,
        stagger: 0.1,
        delay: 0.8,
        ease: "back.out(1.7)"
    });
</script>
</body>
</html>